<template>
  <div class="page-view">
    <div
      class="wrapper"
      :class="{heigher: isKF}"
    >
      <img
        src="~assets/pay/paySuccess.png"
        class="pic"
      >
      <p class="tip">
        恭喜您，报名成功！
      </p>
      <h3 class="class-name">
        {{ payInfo.GoodsName }}
      </h3>
      <div class="class-time">
        {{ payInfo.ClassStartTime }}至{{ payInfo.ClassEndTime }}
      </div>
      <div
        v-if="isKF"
        class="kf-qrcode"
      >
        <p class="qr-txt">
          识别二维码关注公众号
        </p>
        <img
          src="~assets/class/kf-qrcode.jpg"
          class="qr-img"
        >
      </div>
      <div
        v-if="isScholar"
        class="btns"
      >
        <!-- TODO: router name -->
        <router-link
          tag="div"
          :to="{name: 'classDetail', query: {
            classId: payInfo.GoodsId,
            title: payInfo.GoodsName,
          }}"
          class="btn btn-study"
        >
          去学习
        </router-link>
        <router-link
          class="btn btn-scholarship"
          tag="div"
          :to="{name: 'scholarShip'}"
        >
          奖学金
        </router-link>
      </div>
      <div
        v-else
        class="btns-noScholar"
      >
        <router-link
          tag="div"
          :to="{name: 'classDetail', query: {
            classId: payInfo.GoodsId,
            title: payInfo.GoodsName,
          }}"
          class="btn btn-study"
        >
          去学习
        </router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    const productsStr = sessionStorage.getItem('product_info-pay')
    let payInfo = {}
    if (productsStr) {
      payInfo = JSON.parse(productsStr)[0]
    }
    return {
      isScholar: this.$store.state.instInfo.IsScholarInst,
      payInfo,
      isKF: this.$store.state.instInfo.TrainingInstitutionId === 268,
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'pay') {
      next(false)
      this.$router.push({ name: 'home' })
    } else {
      next()
    }
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  background: #fff;
}
.wrapper {
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}
.heigher {
  height: 90%;
  .btns {
    margin-top: 40px;
  }
}
.pic {
  width: 160px;
}
.tip {
  margin: 20px 0 58px;
  font-size: 36px;
}
.class-name {
  margin-bottom: 20px;
  color: #333;
  font-size: 36px;
}
.class-time {
  font-size: 30px;
}

.kf-qrcode {
  margin-top: 45px;
  text-align: center;
}
.qr-txt {
  font-size: 30px;
  color: #000;
}
.qr-img {
  width: 300px;
  height: 300px;
}

.btns-noScholar {
  margin-top: 180px;
}
.btns {
  margin-top: 180px;
  display: flex;
  width: 422px;
  justify-content: space-between;
}
.btn {
  width: 180px;
  height: 60px;
  line-height: 60px;
  // border: 1px solid #000;
  // @include px1border(all, #000);
  font-size: 30px;
  text-align: center;
  border-radius: 3px;
}
.btn-study {
  border-color: #04CABC;
  @include px1border(all, #04CABC);
  color: #04CABC;
}
.btn-scholarship {
  border-color: #F1AB2B;
  @include px1border(all, #F1AB2B);
  color: #F1AB2B;
}
</style>
